<template>
	  <view class="container" >
		 <view class="login-icon" >
			  <image class="login-img" src="@/static/img/register_bg.png"></image> 
		  </view>
		  
		  <view class="login-from" v-if="true">
			  <!--  账号 -->
			  <view class="inputView">
				  <image class="nameImage" src="@/static/img/login_name.png"></image>
				  <input class="inputText" v-model="user.username" placeholder="请输入账号"/>
			  </view>
			  
			  <!-- 密码 -->
			  <view class="inputView">
			  	   <image class="nameImage" src="@/static/img/login_password.png"></image>
			  	   <input class="inputText" v-model="user.password" password="true"  placeholder="请输入密码"/>
			  </view>
			  <view class="inputView">
				  <image class="nameImage" src="@/static/img/login_password.png"></image>
				  <input class="inputText" v-model="checkpassword" password="true" placeholder="请再次输入密码"/>
			  </view>
			  
			  <!-- 电话 -->
			  <view class="inputView">
			  	   <image class="nameImage" src="@/static/img/register_phone.png"></image>
			  	   <input class="inputText" v-model="user.telephone"   placeholder="请输入电话"/>
			  </view>
			  
			  <!-- 邮箱 -->
			  <view class="inputView">
			  	   <image class="nameImage" src="@/static/img/register_email.png"></image>
			  	   <input class="inputText" v-model="user.email"   placeholder="请输入邮箱"/>
			  </view>
  
			  <!-- 注册按钮 -->
			  <view class="registerBtnView" @click="register">
				  立即注册
			  </view>
			  
		
		  </view>
		  
		  <view>
		  		<u-toast ref="uToast" />
		  </view>
	  </view>
</template>
 
<script>
	import Vue from 'vue'
	import Router from '@/router'
	export default {
		data(){
			return{
				user:{},
				checkpassword:"",	
			}
		},
	
		methods:{
			 register(){
		
				 // this.user.username==""||this.user.username==null
				 if(JSON.stringify(this.user) == "{}"){
					 uni.showModal({
					 		title: "请进行注册",
					 		content: "无输入，请正确进行注册",
					 		showCancel:false,
					 		success: function (res) {
					 			if (res.confirm) {
					 				console.log('用户点击确定');
					 			} else if (res.cancel) {
					 				console.log('用户点击取消');
					 			}
					 		}
					 	});
				 }//用户名密码不一致
				 else if(this.checkpassword!=this.user.password){
					 uni.showModal({
					 		title: "密码不一致",
					 		content: "两次密码不一致请重试",
					 		showCancel:false,
					 		success: function (res) {
					 			if (res.confirm) {
					 				console.log('用户点击确定');
					 			} else if (res.cancel) {
					 				console.log('用户点击取消');
					 			}
					 		}
					 	});
				 }else{
					this.$axios
						 .post('/register', this.user)
						 .then(response => {
							 let result = response.data;
							 if (result.success) {
								uni.showToast({
										title: "注册成功",
										icon: 'success',    
										duration: 2000    //持续时间为 2秒
											})
								this.timer = setTimeout(()=>{   //设置延迟执行
									Router.push({ name:'index'});	
								},2000);
										
							 } else {
								uni.showModal({
										title: "存在相同用户名",
										content: "存在相同用户名，请重试!!!",
										showCancel:false,
										success: function (res) {
											if (res.confirm) {
												console.log('用户点击确定');
											} else if (res.cancel) {
												console.log('用户点击取消');
											}
										}
									});
							 }
						 })
						 .catch(err => {
							 console.log(err);
						 })
					 }
				 }
				 
			 }
		}	
	
</script>
 
<style>
/* #ifndef H5 */
page {
	height: 100%;
	background-color: #eeeeee;
}
/* #endif */
</style>
 
<style lang="scss" scoped>
	page{ 
	 height: 100%; 
	} 
	  
	.container { 
	 height: 100%; 
	 display: flex; 
	 padding: 0; 
	 box-sizing: border-box; 
	   /*登录图片*/
	   .login-icon{ 
		 height: 100%;
		 .login-img{
		  width: 100%;
		 		position: fixed;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				z-index: -1;
		 } 
	   } 
	   
	   /*表单内容*/
	   .login-from view:nth-child(2){
	   			  margin-top: 20rpx;
	   }
	   .login-from view:nth-child(3){
	   			  margin-top: 20rpx;
	   }
	   .login-from view:nth-child(4){
	   			  margin-top: 20rpx;
	   }
	   .login-from view:nth-child(5){
	   			  margin-top: 20rpx;
	   }
	   .login-from { 
	    margin-top: 40rpx; 
	   	margin-left: 47rpx;
	    position: relative;
	    height:748rpx;
	   	width: 656rpx;
	   		  .inputView {
	   		   background-color: #FFFFFF; 
	   		   display: flex;
	   		   height: 80rpx;
			   margin-left: 80rpx;
	   		   border-radius: 6rpx;
	   		   width: 500rpx;
	   		        /*输入框*/
	   			   .nameImage{ 
	   				margin-left: 22rpx; 
	   				margin-top: 35rpx;
	   				width: 24rpx; 
	   				height: 24rpx
	   			   }  
	   			   .inputText {
	   				margin-left: 25rpx; 
	   				margin-top: 20rpx;
	   				color: #727272; 
	   				font-size: 30rpx
	   			   }  
	   		  } 
	   		  
			  
			.registerBtnView{
				  margin-top: 40rpx;
				  margin-left: 200rpx;
				  background: burlywood;
				  padding-top: 13rpx;
				  text-align: center;
				  font-size: 32rpx;
				  letter-spacing:4rpx;
				  color: #f5ffed;
				  height: 60rpx;
				  width: 300rpx;
				  border-radius: 10rpx;
				   			  
			}	
	   		  
	   		     
	   } 
	} 
</style>